
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="UTF-8">
    <title>借阅记录</title>
    <link rel="stylesheet" href="../../js/layui/css/layui.css">
    <script src="../../js/jquery-3.4.1.js"></script>
    <script src="../../js/layui/layui.all.js"></script>
    <style>
        .table-container {
            padding: 20px;
        }

        .return-btn {
            color: white;
            background-color: #FF5722; /* 红色警告色 */
        }
        body {
            background-color: #FFF5E1; /* Light peach background */
            color: #6B4226; /* Dark brown text */
        }
        table {
            width: 100%;
            border-collapse: collapse;
        }
        th {
            background-color: #FFD700; /* Warm yellow header background */
            color: #6B4226; /* Dark brown text */
            padding: 10px;
        }
        td {
            background-color: #FFF8DC; /* Light warm background for table cells */
            color: #6B4226; /* Dark brown text */
            padding: 10px;
            border: 1px solid #D2B48C; /* Tan borders */
        }
        a {
            color: #D2691E; /* Warm brown link color */
        }
        button {
            background-color: #FFB347; /* Warm orange button background */
            color: #FFFFFF; /* White text on buttons */
            border: none;
            padding: 10px 20px;
            border-radius: 5px;
        }
        button:hover {
            background-color: #FF7F50; /* Slightly darker orange on hover */
        }
    </style>
</head>
<body>
<div class="table-container">
    <table class="layui-table" id="borrowTable">
        <thead>
        <tr>
            <th>记录ID</th>
            <th>用户名</th>
            <th>书名</th>
            <th>ISBN</th>
            <th>借阅日期</th>
            <th>状态</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody></tbody>
    </table>
</div>
<script>
    $(document).ready(function () {
        let user = JSON.parse(sessionStorage.getItem('user'));

        checkUser(user)

        /**
         * 加载表格数据
         * @param userId
         */
        function loadBorrowHistory(userId) {
            $.ajax({
                url: '/user/getBorrowHistory',
                type: 'POST',
                data: {userId: userId},
                success: function (res) {

                    if (res.code === 200) {
                        renderTable(res.data);
                    } else {
                        layui.layer.msg(res.msg, {icon: 2});
                    }
                },
                error: function () {
                    layui.layer.msg('查询失败，请重试', {icon: 2});
                }
            });


        }

        /**
         * 渲染表格
         * @param data
         */
        function renderTable(data) {
            let tbody = $('#borrowTable tbody');
            tbody.empty();
            data.forEach(function (record) {
                let tr = $('<tr>');
                tr.append('<td>' + record.recordId + '</td>');
                tr.append('<td>' + record.user.username + '</td>');
                tr.append('<td>' + record.book.title + '</td>');
                tr.append('<td>' + record.book.isbn + '</td>');
                tr.append('<td>' + formatDate(record.borrowDate) + '</td>');
                tr.append('<td>' + record.status + '</td>');
                if (record.status === 'borrowed') {
                    tr.append('<td><a href="javascript:;" class="layui-btn layui-btn-danger return-btn" data-id="' + record.bookId + '">归还</a></td>');
                } else {
                    tr.append('<td>已归还</td>');
                }
                tbody.append(tr);
            });
        }

        /**
         * 格式化日期
         * @param date 日期数据
         * @returns {string} 字符串
         */
        function formatDate(date) {
            if (!date) return '';
            let d = new Date(date);
            return d.getFullYear() + '-' + (d.getMonth() + 1) + '-' + d.getDate();
        }

        /**
         * 检查用户是否登录
         * @param user 用户信息
         */
        function checkUser(user) {
            if (user && user.userId) {
                loadBorrowHistory(user.userId);
            } else {
                layui.layer.msg('请先登录', {icon: 2});
                setTimeout(function () {
                    parent.document.getElementById('view_frame').src = "./page/public/login.jsp";
                }, 1000);
            }
        }

        /**
         * 绑定还书按钮点击事件
         */
        $(document).on('click', '.return-btn', function () {
            let bookId = $(this).data('id');
            layui.layer.confirm('确认归还吗？', function (index) {
                $.ajax({
                    url: '/user/returnBook',
                    type: 'POST',
                    data: {userId: user.userId, bookId: bookId},
                    success: function (res) {
                        if (res.code === 200) {
                            layui.layer.msg('归还成功', {icon: 1});
                            loadBorrowHistory(user.userId);  // 重新加载表格数据
                            layui.layer.close(index);
                        } else {
                            layui.layer.msg(res.msg, {icon: 2});
                        }
                    },
                    error: function () {
                        layui.layer.msg('归还失败，请重试', {icon: 2});
                    }
                });

            });
        });
    });
</script>
</body>
</html>
